---
title: "Color Swatch"
description: A predefined color block that allows users to quickly select commonly used or brand-specific colors.
order: 5
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorSwatch.html#props"]
---

## Basic
The basic color swatch simply displays the selected color value.
<How toUse="colors/color-swatch/color-swatch-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-swatch
```

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='color-swatch'/>

## Anatomy
```
import { ColorSwatch } from "@/components/ui/color-swatch"

<ColorSwatch aria-label="Current color" color="#0d6efd" />
```

## Size
You can use the `--color-swatch-size` variable to adjust the size of the color swatch.
<How toUse="colors/color-swatch/color-swatch-size-demo" />
